<template>
  <div class="PersonalInformationInf">
    <div class="alertBox"> {{alertBoxTex}} </div>
    <div class="tit">
      <p>个人信息</p>
      <div class="editor" @click="isSho">
        编辑
      </div>
    </div>
    <div class="cont" id="Exhibition">
      <div class="HeadPortrait">
        <div class="HeadPortrait_box">
          <img v-if="!userL.picture" src="../../../../static/img/PersonalCenter/img_touxiang.png" alt="">
          <img v-else :src="'http://cheyipai.ucarcloud.cn/auctionCarFile/' + userL.picture" alt="">
        </div>
      </div>
      <div class="userInfo">
        <div class="userNmae">
          姓 &nbsp; &nbsp; &nbsp; 名 :
          <span v-if="!userL.nickname" class="isNone">未填写</span>
          <span v-else>{{userL.nickname}}</span>
        </div>
        <div class="userSex">
          性 &nbsp; &nbsp; &nbsp; 别 :
          <span  v-if="userL.sex
          != '0' && userL.sex != '1'" class="isNone">未填写</span>
          <span v-else>{{userL.sex == '0' ? '男' : '女'}}</span>
        </div>
        <div class="userAge">
          年 &nbsp; &nbsp; &nbsp; 龄 :
          <span  v-if="!userL.age || userL.age == 0" class="isNone">未填写</span>
          <span v-else>{{userL.age}}</span>
        </div>
        <div class="DrivingAge">
          驾 &nbsp; &nbsp; &nbsp; 龄 :
          <span  v-if="!userL.driveExp || userL.driveExp == 0" class="isNone">未填写</span>
          <span v-else>{{userL.driveExp}}</span>
        </div>
        <div class="address addressInfo">
          <span>联系地址 :</span>
          <span  v-if="!userL.address" class="isNone">&nbsp;未填写</span>
          <span v-else class="address_span">{{userL.address}}</span>
        </div>
      </div>
    </div>
    <form action="" class="cont" style="display: none" id="write">
      <div class="HeadPortrait">
        <div class="HeadPortrait_box setHeadPortrait">
          <img v-if="!formVals.pic" src="../../../../static/img/PersonalCenter/img_touxiang.png" id="oldImg" alt="">
          <!-- <img v-else :src="'http://cheyipai.ucarcloud.cn/auctionCarFile/' + formVals.pic" alt="" id="newImg"> -->
          <img v-else :src="Ispic" alt="" id="newImg">
        </div>
        <div @click="fileClick" class="fileClick">上传头像</div>
      </div>
      <div class="userInfo">
        <div class="userNmae">
          姓 &nbsp; &nbsp; &nbsp; 名 :<input type="text" name="nickname" @input="isChe($event)" value="" v-model="formVals.nickname" class="nam">
        </div>
        <div class="userSex">
          性 &nbsp; &nbsp; &nbsp; 别 :
          <label @click="getSex(0)" id="male"><input type="radio" name="sex" value="0" class="sex" checked=""><p class="seP"><i></i></p> 男</label>
          <label class="r" @click="getSex(1)" id="female"><input type="radio" name="sex" value="1" class="sex" checked=""><p class="seP"><i></i></p> 女</label>
        </div>
        <div class="userAge">
          年 &nbsp; &nbsp; &nbsp; 龄 :<input type="text" name="age" @input="ageVerify($event)" v-model="formVals.age" maxlength="3">岁
        </div>
        <div class="DrivingAge">
          驾 &nbsp; &nbsp; &nbsp; 龄 :<input type="text" name="driveExp" @input="driveExpVerify($event)" v-model="formVals.driveExp" maxlength="3">年
        </div>
        <div class="address">
          <em>联系地址 :</em>
          <textarea name="address" maxlength="30" v-model="formVals.address"></textarea>
        </div>
      </div>
      <input id="fileIn" type="file" @change="getFile($event)" style="display: none">
      <div class="isBtn">
        <div class="cancel" @click="cancel">取消</div>
        <div @click="submitForm($event)" class="Determine">保存</div>
      </div>
    </form>
      <!-- 用户: <input type="text" name="id" v-model="formVals.id"> -->
  </div>
</template>
<script>
export default {
  data () {
    return {
      userL: {},
      userLis: {},
      formVals: {
        pic: '',
        nickname: '',
        address: '',
        age: '',
        driveExp: '',
        sex: '',
        id: ''
      },
      alertBoxTex: '',
      Ispic: ''
    }
  },
  created () {
    // 读取本地
    let storage = window.sessionStorage
    let json = storage.getItem('WSKuserLis')
    let jsonObj = JSON.parse(json)
    if (jsonObj) {
      this.userLis = jsonObj.data.data.user
    }
    if (!this.userLis.id || this.userLis.id === '') {
      this.$router.push({path: '/login/login'})
    }
    this.formVals.id = this.userLis.id
    this.getUser()
    // 获取性别
    this.getSex()
  },
  methods: {
    // 验证年龄
    ageVerify (x) {
      let patrn = /^[1-9]\d*$/
      let values = x.target.value
      if (!patrn.test(values)) {
        this.formVals.age = ''
        values = ''
      }
    },
    // 验证驾龄
    driveExpVerify (x) {
      let patrn = /^[1-9]\d*$/
      let values = x.target.value
      if (!patrn.test(values)) {
        this.formVals.driveExp = ''
        values = ''
      }
    },
    // 限制昵称长度
    isChe (x) {
      if (x.target.value.length >= 7) {
        this.formVals.nickname = x.target.value.substring(0, 7)
      }
    },
    getUser () {
      this.$http({
        url: 'http://paimai.ucarcloud.cn/auctionCarCore/user/info?x=' + new Date().getTime(),
        params: {
          userId: this.userLis.id
        },
        headers: {'from': 'web'}
      }).then(r => {
        this.userL = r.data.data
        this.formVals.pic = r.data.data.picture || ''
        this.formVals.nickname = r.data.data.nickname || ''
        this.formVals.address = r.data.data.address || ''
        this.formVals.age = r.data.data.age || ''
        this.formVals.driveExp = r.data.data.driveExp || ''
        this.formVals.sex = r.data.data.sex || ''
        this.Ispic = 'http://cheyipai.ucarcloud.cn/auctionCarFile/' + r.data.data.picture
        // console.log(r.data.data.nickname)
      })
    },
    // 取消
    cancel () {
      // 重新获取用户信息
      this.getUser()
      $('#write').fadeOut(0)
      $('#Exhibition').fadeIn(0)
      // 清空file
      $('#fileIn').val('')
    },
    // 编辑
    isSho () {
      $('#write').fadeIn(0)
      $('#Exhibition').fadeOut(0)
      if (this.formVals.sex === '0') {
        // 清除元素样式
        $('.seP').eq(1).css('borderColor', '')
        $('.seP>i').eq(1).css('background', '')
        $('.sex').eq(1).checked = false
        $('#female').css('color', '')
        // 被选中元素
        $('.sex').eq(0).checked = true
        $('.seP').eq(0).css('borderColor', '#ff6f3c')
        $('.seP>i').eq(0).css('background', '#ff6f3c')
        $('#male').css('color', '#ff6f3c')
      } else if (this.formVals.sex === '1') {
        // 清除元素样式
        $('.sex').eq(0).checked = false
        $('.seP').eq(0).css('borderColor', '')
        $('.seP>i').eq(0).css('background', '')
        $('#male').css('color', '')
        // 被选中元素
        $('.seP').eq(1).css('borderColor', '#ff6f3c')
        $('.seP>i').eq(1).css('background', '#ff6f3c')
        $('.sex').eq(1).checked = true
        $('#female').css('color', '#ff6f3c')
      }
    },
    // 获取性别
    getSex (x) {
      this.formVals.sex = $('.sex:radio:checked').val()
      if (x === 0) {
        // 清除元素样式
        $('.seP').eq(1).css('borderColor', '')
        $('.seP>i').eq(1).css('background', '')
        $('.sex').eq(1).checked = false
        $('#female').css('color', '')
        // 被选中元素
        $('.sex').eq(0).checked = true
        $('.seP').eq(0).css('borderColor', '#ff6f3c')
        $('.seP>i').eq(0).css('background', '#ff6f3c')
        $('#male').css('color', '#ff6f3c')
      } else {
        // 清除元素样式
        $('.sex').eq(0).checked = false
        $('.seP').eq(0).css('borderColor', '')
        $('.seP>i').eq(0).css('background', '')
        $('#male').css('color', '')
        // 被选中元素
        $('.seP').eq(1).css('borderColor', '#ff6f3c')
        $('.seP>i').eq(1).css('background', '#ff6f3c')
        $('.sex').eq(1).checked = true
        $('#female').css('color', '#ff6f3c')
      }
    },
    // 获取file
    getFile (event) {
      let files = event.target.files[0]
      // 判断文件格式
      if (!/\/(?:jpeg|png|gif|jpg)/i.test(files.type)) {
        this.formVals.pic = ''
        this.alertBox(true)
        this.alertBoxTex = '请选择图片'
        this.getUser()
        return ''
      } else {
        // 把文件填写到提交内容中
        this.formVals.pic = files
        // 创建FileReader对象
        let reader = new FileReader()
        // 获取url（读取成url）
        reader.readAsDataURL(files)
        // 读取成功
        reader.onload = () => {
          // 拿到url
          let result = reader.result
          // 获取img
          // let newImg = document.getElementById('newImg')
          // newImg.src = result
          this.Ispic = result
        }
      }
    },
    // 提交数据
    submitForm (event) {
      let _this = this
      event.preventDefault()
      let formData = new FormData()
      formData.append('driveExp', this.formVals.driveExp)
      formData.append('age', this.formVals.age)
      formData.append('nickname', this.formVals.nickname)
      formData.append('address', this.formVals.address)
      formData.append('pic', this.formVals.pic)
      formData.append('sex', this.formVals.sex)
      formData.append('id', this.formVals.id)
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          'from': 'web'
        }
      }
      this.$http.post('http://paimai.ucarcloud.cn/auctionCarCore/user/edit', formData, config).then((r) => {
        if (r.data.state === 'SUCCESS') {
          _this.alertBox()
          _this.getUser()
          _this.alertBoxTex = '保存成功'
        }
      })
    },
    // 弹框
    alertBox (x) {
      $('.alertBox').eq(0).fadeIn(0)
      setTimeout(function () {
        $('.alertBox').eq(0).fadeOut(0)
        if (!x) {
          $('#write').fadeOut(0)
          $('#Exhibition').fadeIn(0)
        }
      }, 2000)
    },
    // 点击上传图片
    fileClick () {
      $('#fileIn').click()
    }
  }
}
</script>
<style lang="scss" scoped>
#oldImg{
  width: 100%;
}
.PersonalInformationInf{
  width: 938px;
  height: 770px;
  border: 1px solid #e3e3e3;
  float: left;
  position: relative;
  .alertBox{
    display: none;
    width: 260px;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 5px;
    top: 50%;
    left: 240px;
    position: absolute
  }
  .tit{
    background: #fafafa;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    padding: 0 30px;
    font-size: 18px;
    border-bottom: 1px solid #ff6f3c;
    p{
      float: left;
      color: #333;
    }
    .editor{
      float: right;
      color: #ff6f3c;
      cursor: pointer;
    }
  }
  .cont{
    margin: 40px 0 0 285px;
    .HeadPortrait{
      width: 130px;
      height: 190px;
      .HeadPortrait_box{
        width: 130px;
        height: 130px;
        overflow: hidden;
        border-radius: 50%;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .fileClick{
        text-align: center;
        color: #ff6f3c;
        font-size: 14px;
        border-bottom: 1px solid #ff6f3c;
        width: 56px;
        margin: 10px auto 0;
        cursor: pointer;
      }
    }
    .isBtn{
      margin-left: 15px;
      line-height: 40px;
      .cancel{
        display: inline-block;
        width: 120px;
        height: 40px;
        border: 1px solid #e3e3e3;
        background: #fafafa;
        border-radius: 5px;
        cursor: pointer;
        font-size: 18px;
        text-align: center;
      }
      .Determine{
        display: inline-block;
        text-align: center;
        font-size: 18px;
        width: 120px;
        height: 40px;
        margin-left: 128px;
        background: #ff6f3c;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }
    }
    .userInfo{
      div{
        margin-bottom: 30px;
        font-size: 16px;
        height: 36px;
        line-height: 36px;
        color: #333;
        .isNone{
          color: #999;
        }
      }
      .addressInfo{
        height: 102px;
        overflow: hidden;
        margin-bottom: 30px;
        span{
          float: left;
        }
        .address_span{
          width: 320px;
          line-height: 20px;
          margin: 7px 0 0 7px;
          height: 100px;
          overflow: auto;
        }
      }
      .address{
        height: 102px;
        overflow: hidden;
        margin-bottom: 30px;
        em{
          float: left;
          line-height: 30px;
        }
        textarea{
          float: left;
          width: 300px;
          height: 80px;
          border: 1px solid #e3e3e3;
          border-radius: 5px;
          resize:none;
          padding: 10px;
          margin-left: 4px;
          line-height: 24px;
          font-size: 16px;
          outline: none;
          &:focus{
            border: 1px solid #ff6f3c;
          }
        }
      }
      .userNmae{
        input{
          font-size: 16px;
          margin-left: 4px;
          width: 150px;
          padding-left: 10px;
          height: 34px;
          border: 1px solid #e3e3e3;
          border-radius: 5px;
        }
        input:focus{
          border: 1px solid #ff6f3c;
        }
      }
      .userSex{
        font-size: 16px;
        label{
          cursor: pointer;
          p{
            display: inline-block;
            margin: 0 10px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 1px solid #e3e3e3;
            vertical-align: -3px;
            position: relative;
            i{
              width: 6px;
              height: 6px;
              // background: #ff6f3c;
              border-radius: 50%;
              position: absolute;
              left: 0;
              right: 0;
              margin: 0 auto;
              top: 50%;
              margin-top: -3px;
            }
          }
        }
        input{
          display: none;
        }
        .r{
          margin-left: 34px;
        }
      }
      .userAge,.DrivingAge{
        input{
          width: 120px;
          padding-left: 10px;
          height: 34px;
          font-size: 16px;
          border: 1px solid #e3e3e3;
          border-radius: 5px;
          margin-left: 4px;
          margin-right: 10px;
        }
        input:focus{
          border: 1px solid #ff6f3c;
        }
      }
    }
  }
}
</style>
